<template>
    <div class="shop_info">
        <!-- 基本信息 -->
        <van-form @submit="onSubmit" error-message-align="right" input-align="right" >
            <div class="basic_title"><span>*</span> 基本信息</div>
            <van-field v-model="name" name="name" label="商户简称" placeholder="请输入商户简称"
                :rules="[{ required: true, message: '请输入商户简称' }]" />
            <van-field v-model="contacts" name="contacts" label="联系人" placeholder="请输入联系人"
                :rules="[{ required: true, message: '请输入联系人' }]" />
            <van-field v-model="phone" name="phone" label="联系人手机号" placeholder="请输入联系人手机号"
                :rules="[{ required: true, message: '请输入联系人手机号' }]" />
                <van-field v-model="email" name="email" label="邮箱" placeholder="请输入邮箱"
                :rules="[{ required: true, message: '请输入邮箱' },{ pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确' }]" />
            <!-- <van-field v-model="subsidy_config_name" name="subsidy_config_name" label="让利比例" placeholder="请选择让利比例"
                :rules="[{ required: true, message: '请选择让利比例' }]" readonly is-link @click="showPopup = true" /> -->
                <div class="basic_title">审核备注</div>
            <van-field v-model="audit_reason" name="audit_reason" label="审核备注" placeholder="请输入您的留言"
             />
             <div style="width: 100%">
                <van-button round block type="info" native-type="submit" style="width: 95%;margin: 0.32rem auto;"
                    color="linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%)">保存并下一步</van-button>
            </div>
        </van-form>
        <van-button round block type="info" @click="onDraft" style="width: 95%;margin: 0.32rem auto;"  v-if="info.id<=0"
        color="linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%)">暂存草稿</van-button>
        <van-popup v-model="showPopup" position="bottom">
            <van-picker value-key="name" show-toolbar :columns="columns" @confirm="onConfirm"
                @cancel="showPopup = false" :value="subsidy_config_id" />
        </van-popup>
    </div>
</template>
<script>
import {CACHE_INFO,CACHE_COMMIT,SUBSIDY_CONFIGS} from '@/api/mine'
export default({
    props:['info'],
    data() {
        return {
            audit_reason:"",
            name:"",
            contacts:"",
            phone:"",
            subsidy_config_id:"",
            email:"",
            settleInfo:{},
            showPopup:false,
            // subsidy_config_name:'',
            columns:[]
        }
    },
    mounted() {
        let params={
            type:'store',
            key:'shopSettleInfo',

        }
        this.$http.get(SUBSIDY_CONFIGS).then(res=>{
            this.columns=res.data
        })
        window.scrollTo(0, 0)
        if(this.info.id<=0){
            this.$http.get(CACHE_INFO,{params:params}).then(res=>{
            if(res.data.content!=''){
                this.settleInfo = JSON.parse(res.data.content)
            }
            this.name = this.info.name|| this.settleInfo.name
            this.contacts = this.info.contacts|| this.settleInfo.contacts
            this.subsidy_config_id=this.info.subsidy_config_id|| this.settleInfo.subsidy_config_id
            // this.subsidy_config_name=this.info.subsidy_config_name|| this.settleInfo.subsidy_config_name
            this.phone = this.info.phone|| this.settleInfo.phone
            this.email = this.info.email|| this.settleInfo.email
            this.audit_reason = this.info.audit_reason|| this.settleInfo.audit_reason
        })
        }else{
            this.name = this.info.name|| this.settleInfo.name
            this.contacts = this.info.contacts|| this.settleInfo.contacts
            this.subsidy_config_id=this.info.subsidy_config_id|| this.settleInfo.subsidy_config_id
            // this.subsidy_config_name=this.info.subsidy_config_name|| this.settleInfo.subsidy_config_name
            this.phone = this.info.phone|| this.settleInfo.phone
            this.email = this.info.email|| this.settleInfo.email
            this.audit_reason = this.info.audit_reason|| this.settleInfo.audit_reason
        }

    },
    methods: {
        onConfirm(val){
            // this.subsidy_config_name=val.name
            this.subsidy_config_id=val.id
            this.showPopup=false
        },
        onSubmit(values) {
            console.log('submit', values);
            this.settleInfo={
                name:this.name,
                contacts:this.contacts,
                subsidy_config_id:this.subsidy_config_id,
                // subsidy_config_name:this.subsidy_config_name,
                phone:this.phone,
                email:this.email,
                audit_reason:this.audit_reason
            }
            let params={
                type:'store',
                key:'shopSettleInfo',
                content:JSON.stringify(this.settleInfo)
            }
            if(this.info.id<=0){
                this.$http.post(CACHE_COMMIT,params).then(res=>{
                })
            }
            this.$emit('basicInfo',this.settleInfo)
        },
        onDraft(){
            this.settleInfo={
                name:this.name,
                contacts:this.contacts,
                subsidy_config_id:this.subsidy_config_id,
                // subsidy_config_name:this.subsidy_config_name,
                phone:this.phone,
                email:this.email,
                audit_reason:this.audit_reason
            }
            let params={
                type:'store',
                key:'shopSettleInfo',
                content:JSON.stringify(this.settleInfo)
            }
            this.$http.post(CACHE_COMMIT,params).then(res=>{
                this.$toast("暂存成功")

            })
            // localStorage.setItem('shopSettleInfo',JSON.stringify(this.settleInfo))
        }
    },  
})
</script>
<style scoped lang="scss">
   ::v-deep .van-cell__right-icon{
        color: #999 !important;
    }
.basic_title {
    font-size: 0.28rem;
    font-weight: bold;
    background: #fff;
    padding: 0.2rem;

    span {
        color: red;
    }
}
</style>